<template>
  <u-popup
    mode="bottom"
    v-model="showPopup"
    :z-index="999"
    border-radius="24"
    safe-area-inset-bottom
    :maskCloseAble="false"
  >
    <view class="popBox">
      <view class="popup-title">
        <view class="let">{{ getTitle }}</view>

        <i class="iconfont icon-close" @click="showPopup = false"></i>
      </view>

      <view class="inp" v-if="form.parent_name">
        <view class="inpTitle">所属分类</view>
        <view class="input">
          <u-input disabled v-model="form.parent_name" type="text"></u-input>
        </view>
      </view>

      <view class="inp">
        <view class="inpTitle">分类名称</view>
        <view class="input">
          <u-input v-model="form.name" type="text" clearable></u-input>
        </view>
      </view>

      <view class="inp auto file">
        <view class="inpTitle">分类图片</view>
        <view class="input">
          <toolsFile
            :fileList="form.pic_url"
            :max="1"
            @success="(e) => fileSuccess(form.pic_url, e)"
            @remove="(i) => form.pic_url.splice(i, 1)"
          ></toolsFile>
        </view>
      </view>

      <view class="inp auto">
        <view class="inpTitle">是否显示</view>
        <view class="input">
          <u-switch
            size="30"
            v-model="form.is_show"
            activeValue="1"
            inactiveValue="0"
          ></u-switch>
        </view>
      </view>

      <view class="popBtn">
        <u-button
          @click="submit"
          :disabled="disabled"
          :customStyle="{
            background: '#F0250E',
            color: '#fff',
            borderRadius: '32px',
          }"
          :hoverStartTime="hoverStartTime"
          >确定</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
import toolsFile from "@/components/tools/tools-file";

export default {
  components: {
    toolsFile,
  },

  computed: {
    getTitle() {
      return !this.form.id ? `添加分类` : `编辑分类`;
    },
  },

  data() {
    return {
      showPopup: false,
      disabled: false,
      hoverStartTime: 1000000,

      form: {
        pic_url: [],
        is_show: true,
        name: "",
        parent_id: 0,
      },
    };
  },

  methods: {
    fileSuccess(el, val) {
      el.push({
        url: val,
      });
    },

    clearForm() {
      this.form = {
        pic_url: [],
        is_show: true,
        name: "",
        parent_id: 0,
      };
    },

    submit() {
      let form = JSON.parse(JSON.stringify(this.form));
      if (!form.name) {
        this.$utils.toast("请填写分类名称!");
        return;
      }

      // if (!form.pic_url.length) {
      //   this.$utils.toast("请上传分类图!");
      //   return;
      // }

      form.pic_url = form.pic_url.map((el) => el.url).join(",");
      form.is_show = form.is_show ? "1" : "0";
      this.disabled = true;
      this.Emit.$emit("submitCategory", form);
    },
  },
};
</script>

<style lang="less" scoped>
.popBox {
  display: flex;
  flex-direction: column;
  padding: 0 0;
}

.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 36rpx;

  .let {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }

  .iconfont {
    color: #262626;
  }
}

.popBtn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  border-top: 1px solid #f2f2f2;
}

.textarea {
  padding: 24rpx 24rpx 80rpx;
  width: 100%;
  height: 232rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #262626;
}

.inp {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 36rpx 20rpx;
  padding: 0 20rpx;

  &.auto {
    align-items: start;
  }

  &.file {
    padding-top: 10rpx;
    padding-bottom: 10rpx;
  }

  .inpTitle {
    width: 150rpx;
  }

  .icon {
    margin-right: 10rpx;
    color: #8c8c8c;
  }

  .input {
    flex: 1;
    overflow: hidden;
  }
}

.number {
  position: absolute;
  right: 60rpx;
  bottom: 20rpx;
  font-size: 28rpx;
  color: #8c8c8c;
}
</style>
